/* components */
import BaseTags from '@src/component/common/BaseTags/index.ts'
import CustomerTagEditDialog from '@src/modules/customer/view/components/CustomerTagEdit/CustomerTagEditDialog.tsx'
/* entity */
import CustomerTag from '@model/entity/CustomerTag'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* scss */
import '@src/modules/customer/view/components/CustomerTagEdit/CustomerTagEdit.scss'
/* util */
import { isEmpty } from '@src/util/type'
/* vue */
import { Component, Emit, Prop, Ref, Watch } from 'vue-property-decorator'
import { CreateElement } from 'vue'
import VC from '@model/VC'
import i18n from '@src/locales'

import { customerLabel, customerTagValue } from '@src/modules/customer/util/customer.js';

enum CustomerTagEditDialogEmitEventEnum {
  Change = 'change'
}

@Component({ 
  name: ComponentNameEnum.CustomerTagEdit,
  components: {
    [ComponentNameEnum.CustomerTagEditDialog]: CustomerTagEditDialog
  }
})
export default class CustomerTagEdit extends VC {
  
  @Ref() CustomerTagEditDialogComponent!: CustomerTagEditDialog
  
  @Prop({ default: '' }) readonly customerId: string | undefined 
  @Prop({ default: 34 }) readonly lineHeight: number | undefined 
  @Prop({ default: false }) readonly showEdit: boolean | undefined
  @Prop({ default: () => [] }) readonly value: CustomerTag[] | undefined 
  
  private elementLineHeightIsLimit: boolean = true
  
  get shortValue():  CustomerTag[] {
    return customerLabel(this.value || [])
  }
  
  get _value(): CustomerTag[] {
    return this.value || []
  }
  
  get isCustomerTagsEmpty(): boolean {
    return isEmpty(this._value)
  }
  
  get lineHeightNumber(): number {
    return Number(this.lineHeight)
  }
  
  @Emit(CustomerTagEditDialogEmitEventEnum.Change)
  private emitValueChangedHandler(value: CustomerTag[]): CustomerTag[] {
    return value
  }
  
  @Watch('value', { immediate: true })
  private onValueChanged() {
    this.$nextTick(() => {
      this.computedElementLineHeightIsLimit()
    })
  }
  
  private computedElementLineHeightIsLimit() {
    const element: Element = this.$el
    const clientHeight: number = element.clientHeight
    
    this.elementLineHeightIsLimit = clientHeight > this.lineHeightNumber
  }
  
  private showEditDialog() {
    this.CustomerTagEditDialogComponent?.outsideShow(this._value)
  }
  
  render(h: CreateElement) {
    const classNames: string[] = [
      ComponentNameEnum.CustomerTagEdit, 
      this.isCustomerTagsEmpty ? `${ComponentNameEnum.CustomerTagEdit}-empty` : '',
      this.elementLineHeightIsLimit ? `${ComponentNameEnum.CustomerTagEdit}-multi` : ''
    ]
    
    return (
      <div class={classNames}>
        <el-tooltip placement="top">
            <div slot="content">
              {  customerTagValue(this._value) }
            </div>
            <BaseTags value={this.shortValue}></BaseTags>
        </el-tooltip>

        {this.showEdit && (
          <span class="customer-tag-edit-text" onClick={() => this.showEditDialog()}>
            <i class="iconfont icon-edit-square task-icon task-font14"></i>
            {i18n.t('customer.detail.editTag')}
          </span>
        )}
        <customer-tag-edit-dialog 
          onChange={(value: CustomerTag[]) => this.emitValueChangedHandler(value)} 
          customerId={this.customerId} 
          ref='CustomerTagEditDialogComponent' 
        />
      </div>
    )
  }
}

